import React, { useEffect, useState } from 'react';
import { DatePicker, Form, Input, InputNumber, Radio, Select } from 'antd';
import cn from 'classnames';
import { groupBy } from 'lodash';
import moment from 'moment';
import styles from '@/pages/MyRecruit/Offer/Detail/Detail.less';
import { FormContainer } from '@/components/UserForm';
import { dictionaryList } from '@/services/dictionary';
import { getRadioOptionData } from '@/pages/Flow/Mine/ApplyPage/utils';
import FileUpload from '@/components/Custom/FileUpload';

const SingaporeDetail = ({ Item, form, data, layout, refs, sex, fileList }) => {
    const { getFieldDecorator } = form;
    const [awsType, setAwsType] = useState([]);
    const [accumulationFundType, setAccumulationFundType] = useState([]);
    useEffect(() => {
        const fetchDict = async () => {
            const codes = ['AWSType', 'accumulationFundType'];
            const response = await dictionaryList({
                codes
            });
            if (response.code === 10000) {
                const group = groupBy(response.data, 'code');
                setAwsType(
                    getRadioOptionData(group.AWSType, {
                        key: 'dictValue',
                        label: 'dictName'
                    })
                );
                setAccumulationFundType(
                    getRadioOptionData(group.accumulationFundType, {
                        key: 'dictValue',
                        label: 'dictName'
                    })
                );
            }
        };

        fetchDict();
    }, []);
    return (
        <Form className={styles.detail} {...layout}>
            <h3 className="vv-from-title" ref={refs[0].ref}>
                录用信息
            </h3>
            <FormContainer gutter={40}>
                <Item label="录用人姓名">
                    {getFieldDecorator('a', {
                        initialValue: data.talentName
                    })(<Input />)}
                </Item>
                <Item label="性别">
                    {getFieldDecorator('b', {
                        initialValue: data.talentSex
                    })(<Radio.Group options={sex} />)}
                </Item>
                <Item label="出生年月">
                    {getFieldDecorator('c', {
                        initialValue: typeof data.talentBirth === 'object' ? undefined : data.talentBirth
                    })(<Input />)}
                </Item>
                <Item label="入职时间">
                    {getFieldDecorator('h', {
                        initialValue: data.entryDate ? moment(data.entryDate) : null
                    })(<DatePicker style={{ width: '100%' }} />)}
                </Item>
                <Item label="录用部门">
                    {getFieldDecorator('f', {
                        initialValue: data.departmentName
                    })(<Input />)}
                </Item>
                <Item label="录用职位">
                    {getFieldDecorator('e', {
                        initialValue: data.entryPostName
                    })(<Input />)}
                </Item>
                <Item label="职级">
                    {getFieldDecorator('entryLevel', {
                        initialValue: data.entryLevel
                    })(<Input />)}
                </Item>
            </FormContainer>
            <h3 className="vv-from-title" ref={refs[1].ref}>
                薪资福利
            </h3>
            <FormContainer gutter={40}>
                <Item label="原单位月薪">
                    {getFieldDecorator('l', {
                        initialValue: data.oldMonthSalary
                    })(<InputNumber />)}
                </Item>
                <Item label="原综合年薪">
                    {getFieldDecorator('m', {
                        initialValue: data.oldYearSalary
                    })(<InputNumber />)}
                </Item>
                <Item label="AWS">
                    {getFieldDecorator('was', {
                        initialValue: data.aws
                    })(<Radio.Group options={awsType} />)}
                </Item>
                <Item label="原花红">
                    {getFieldDecorator('hh', {
                        initialValue: data.originalBonus
                    })(<Input />)}
                </Item>
                <Item label="月薪">
                    {getFieldDecorator('monthSalary', {
                        initialValue: data.monthSalary
                    })(<Input />)}
                </Item>
                <Item label="涨幅">
                    {getFieldDecorator('n', {
                        initialValue: data.gainPercent
                    })(
                        <InputNumber
                            formatter={value => `${value}%`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                            parser={value => value.replace(/\$\s?|(,*)/g, '')}
                        />
                    )}
                </Item>
                <Item label="是否缴纳公积金">
                    {getFieldDecorator('gjj', {
                        initialValue: data.accumulationFund
                    })(<Radio.Group options={accumulationFundType} />)}
                </Item>
                <Item label="劳动合同开始时间">
                    {getFieldDecorator('u', {
                        initialValue: data.contractBeginDate ? moment(data.contractBeginDate) : null
                    })(<DatePicker style={{ width: '100%' }} />)}
                </Item>
                <Item label="试用期长度">
                    {getFieldDecorator('v', {
                        initialValue: data.tryDurationName
                    })(<Input />)}
                </Item>
                <Item label="离职通知期(转正前)">
                    {getFieldDecorator('v', {
                        initialValue: data.probationQuitNoticeName
                    })(<Input />)}
                </Item>
                <Item label="离职通知期(转正后)">
                    {getFieldDecorator('v', {
                        initialValue: data.regularQuitNoticeName
                    })(<Input />)}
                </Item>
                <Item label="申请理由说明" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 19 }}>
                    {getFieldDecorator('v', {
                        initialValue: data.remark
                    })(<Input.TextArea rows={5} />)}
                </Item>
            </FormContainer>
            {/* <h3 className="vv-from-title" ref={refs[2].ref}>
                录用意见
            </h3>
            <FormContainer gutter={40}>
                <Item
                    vvspan={24}
                    labelCol={{ md: 3 }}
                    wrapperCol={{ md: 19 }}
                    label="人力资源总监意见"
                >
                    {getFieldDecorator('w', {
                        initialValue: data.hrBossOpinion
                    })(<Input.TextArea rows={5} />)}
                </Item>
                <Item
                    vvspan={24}
                    labelCol={{ md: 3 }}
                    wrapperCol={{ md: 19 }}
                    label="总经理意见"
                >
                    {getFieldDecorator('x', {
                        initialValue: data.ceoOpinion
                    })(<Input.TextArea rows={5} />)}
                </Item>
            </FormContainer> */}
            <div
                style={{
                    margin: '10px 15px 30px 0'
                }}
                ref={refs[2].ref}
            >
                <h3 className={cn('vv-from-title', styles.title)}>背调信息（360评价）</h3>
                <span className={styles.titleDescription}>最近一份工作经历</span>
            </div>
            <FormContainer gutter={40}>
                <Item label="背调记录人">
                    {getFieldDecorator('y', {
                        initialValue: data.backRecorderName
                    })(<Input />)}
                </Item>
                <Item label="背调记录人职位">
                    {getFieldDecorator('z', {
                        initialValue: data.backRecorderPost
                    })(<Input />)}
                </Item>
                <Item label="背调对象1">
                    {getFieldDecorator('b1', {
                        initialValue: data.firstBackTarget
                    })(<Input.TextArea rows={5} />)}
                </Item>
                <Item label="与候选人关系" style={{ height: 163 }}>
                    {getFieldDecorator('b1', {
                        initialValue: data.firstBackRelationshipName
                    })(<Select />)}
                </Item>
                <Item label="背调对象2">
                    {getFieldDecorator('b1', {
                        initialValue: data.secondBackTarget
                    })(<Input.TextArea rows={5} />)}
                </Item>
                <Item label="与候选人关系">
                    {getFieldDecorator('b1', {
                        initialValue: data.secondBackRelationshipName
                    })(<Select />)}
                </Item>
                <Item label="附件" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 19 }}>
                    {getFieldDecorator('c1', {
                        initialValue: {
                            allFileList: fileList,
                            uploadResourceFile: null
                        }
                    })(<FileUpload disabled />)}
                </Item>
            </FormContainer>
        </Form>
    );
};

export default SingaporeDetail;
